<template>
  <div class="home">
    <header>
      <!--轮播图-->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.link_content">
          <img :src="item.banner_img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 定位 -->
      <ul class="nav">
        <li>
          <van-icon name="gem" color="#5251da" size="30" />
          <p>特色课</p>
        </li>
        <li>
          <van-icon name="chat" color="#73b3a5" size="30" />
          <p>一对一辅导</p>
        </li>
        <li>
          <van-icon name="gift-card" color="#d88f72" size="30" />
          <p>学习日历</p>
        </li>
      </ul>
    </header>
    <div class="box">
      <!-- 资深讲师 -->
      <h1>&ensp;资深讲师</h1>
      <ul class="cont">
        <li v-for="(item, index) in cartList" :key="index">
          <div class="img">
            <img :src="item.teacher_avatar" alt="" />
          </div>
          <div>
            <h3>{{ item.teacher_name }}</h3>
            <p>{{ item.introduction }}</p>
          </div>
        </li>
      </ul>
      <!-- 推荐课程 -->
      <h1>&ensp;推荐课程</h1>
      <ul class="cont1">
        <li
          v-for="(item, index) in tjList"
          :key="index"
          @click="courseAdd(item)"
        >
          <h2>{{ item.title }}</h2>
          <p>公共点击</p>
          <img :src="item.cover_img" alt="" />
          <div class="may">
            <p>{{ item.id }}人报名</p>
            <div class="may1">
              <van-icon name="after-sale" color="#ffa500" />
              <span>{{ item.price }}.00</span>
            </div>
          </div>
        </li>
      </ul>
      <!--名师-->
      <h1>&ensp;名师</h1>
      <ul class="cont">
        <li v-for="(item, index) in msList" :key="index">
          <div class="img">
            <img :src="item.teacher_avatar" alt="" />
          </div>
          <div>
            <h3>{{ item.teacher_name }}</h3>
            <p>{{ item.introduction }}</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部标签栏 -->
    <footer>
      <van-tabbar v-model="active" active-color="#fd6205" inactive-color="#000">
        <van-tabbar-item v-for="(item, index) in icons" :key="index">
          <p><i :class="item.icon"></i></p>
          {{ item.title }}</van-tabbar-item
        >
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import tabber from "../components/tabbar.vue";
import { banner, cartList } from "../request/http";
import Vue from "vue";
import { Swipe, SwipeItem, Icon, Tabbar, TabbarItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Icon);
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  data() {
    return {
      active: 0,
      bannerList: [], //轮播图
      cartList: [], //资深讲师
      tjList: [], //推荐课程
      msList: [], //名师
      icons: [
        {
          id: 0,
          icon: "iconfont icon--xiaolu",
          title: "首页",
        },
        {
          id: 1,
          icon: "iconfont icon-shubence",
          title: "课程",
        },
        {
          id: 3,
          icon: "iconfont icon-dianji",
          title: "约课记录",
        },
        {
          id: 4,
          icon: "iconfont icon-lianxi",
          title: "练习",
        },
        {
          id: 5,
          icon: "iconfont icon-wodeguanzhu",
          title: "我的",
        },
      ],
    };
  },
  methods: {
    banList() {
      //请求轮播图
      banner().then((res) => {
        console.log(res);
        this.bannerList = res.data.data;
      });
      //请求首页数据
      cartList().then((res) => {
        console.log(res);
        this.cartList = res.data.data[0].list;
        this.tjList = res.data.data[1].list; //推荐课程
        this.msList = res.data.data[2].list;
        console.log(this.cartList);
        console.log(this.tjList);
      });
    },
    //课程详情
    courseAdd() {},
  },
  created() {
    this.banList();
  },
  mounted() {},
components: {
    tabber,
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.home {
  background-color: #eee;
  box-sizing: border-box;
  padding-bottom: 160px;
}
header {
  position: relative;
  width: 100%;
  height: 20vh;
  img {
    width: 100%;
    height: 20vh;
  }
}
.nav {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  li {
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 20px;
    text-align: center;
    .van-icon {
      margin-top: 40px;
    }
  }
}
.box {
  margin-top: 140px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  h1 {
    width: 100%;
    border-left: 6px solid red;
    margin: 30px 0;
  }
  //资深讲师
  .cont {
    width: 100%;
    li {
      display: flex;
      width: 100%;
      height: 150px;
      background-color: #fff;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding-top: 30px;
      .img {
        width: 80px;
        height: 80px;
        margin: 0 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      p {
        color: rgb(150, 149, 149);
        margin-top: 20px;
      }
    }
  }
  //推荐课程
  .cont1 {
    width: 100%;
    li {
      width: 100%;
      background-color: #fff;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding: 30px;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .may {
        display: flex;
        justify-content: space-between;
      }
      p {
        color: rgb(150, 149, 149);
      }
      span {
        color: #ff3c00;
      }
    }
  }
}
footer {
  p {
    text-align: center;
    width: 100%;
    height: 50px;
    i {
      font-size: 40px;
    }
  }
}
</style>
